<template>
<div class="app">
  <el-container>
    <el-aside width="200px" style="display: flex">
      <img :src="book.bookImg | url" alt="" style="align-self: center;width: 100%;border-radius: 10px;">
    </el-aside>
    <el-main>
      <h1>
        {{book.bookName}}
      </h1>
      <h4>
        {{book.bookAuthor}}
      </h4>
      <div v-html="book.bookIntroduce"></div>
    </el-main>
  </el-container>

</div>
</template>

<script>
export default {
  name: "BookInfoComponent",
  props: {
    book:Object
  },
  data() {
    return {}
  }, methods: {}, watch: {}, computed: {},filters:{
    url(value){
      return '/api'+value;
    }
  }
}
</script>

<style scoped>
.app{
  min-width: 550px;
}
</style>